<!DOCTYPE html>
<html lang="cn" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        form {
            width: 300px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        input {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
        }
        button {
            background-color: #007bff;
            color: #fff;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
<form id="loginForm">
    <label>用户名</label><br/>
    <input type="text" name="username" required><br/>
    <label>密码</label><br/>
    <input type="password" name="password" required><br/>
    <button type="submit">登录</button>
</form>

<script>
    document.getElementById('loginForm').addEventListener('submit', function (event) {
        event.preventDefault(); // 阻止表单默认提交

        const formData = {
            username: this.username.value,
            password: this.password.value
        };

        fetch('/user/login', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(formData)
        })
            .then(response => {
                if (!response.ok) {
                    throw new Error('网络错误');
                }
                return response.json();
            })
            .then(data => {
                console.log('成功:', data);
                // 处理成功响应数据
            })
            .catch(error => {
                console.error('错误:', error);
                // 处理错误
            });
    });
</script>
</body>
</html>